/**
 * 关键节点
 * */
import React from 'react';
import {
    Tabs, Select, Row, Col, Input, Card, Rate, Tag, PageHeader
} from 'antd';
import {createFromIconfontCN} from '@ant-design/icons';
import 'element-theme-default';
import axios from 'axios'
import qs from 'qs'
import moment from 'moment';
import './StaticStatus.less';
import {AudioOutlined} from '@ant-design/icons';
import {Link} from 'react-router-dom';
import {ShopService} from '../eosjs/EosService'
import boolean from "less/lib/less/functions/boolean";
import {bool} from "prop-types";

moment.locale('zh-cn');
const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1692529_ygnwzydyvip.js',
});
const {Search} = Input;
const {Meta} = Card;
const suffix = (
    <AudioOutlined
        style={{
            fontSize: 16,
            color: '#1890ff',
            paddingRight: 4,
        }}
    />
);

class StoreSearch extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            shopInfo: [[]],
            tag: ""
        };

    }

    componentDidMount() {
        this.getShopInfo();
    }

    render() {
        return (
            <div className="home">
                <PageHeader
                    className="site-page-header"
                    onBack={() => this.props.history.go(-1)}
                    title="店铺"
                    // subTitle="This is a subtitle"
                />
                <Search style={{width: 480}} placeholder="请输入商户标签" onSearch={this.getShopInfo} onChange={this.searchInputChange} enterButton/>

                {/*一行展示三个商家店铺*/}
                <Row gutter={16}>
                    {this.state.shopInfo[0].map((item, index) => {
                        if(item.is_checked === 0){return ;}
                        return (
                            <Col span={8} key={index}>
                                <Card hoverable cover={<img alt={item.shop_name} onClick={this.coverImgClick.bind(this, item)} src={item.picture_url}/>}>
                                    <Link to={{pathname: "/detail/" + item.sid, state: {sid: item.sid}}}>
                                        <Meta title={item.shop_name + " (" + item.tag + ")"} description=<Rate disabled defaultValue={2} style={{size: 100}}/> />
                                        </Link>
                                    <Tag color="default">价格低</Tag> <Tag color="default">有表演</Tag> <Tag
                                    color="default">不排队</Tag>
                                    <p>¥104/人</p>
                                </Card>
                            </Col>
                        );
                    })}
                </Row>
            </div>
        )
    }

    getShopInfo = () => {
        let shopInfo = [];
        let keysAndValues = {};
        if(this.state.tag !== ""){
            keysAndValues.tag = this.state.tag;
        }
        ShopService.getShops(keysAndValues).then(res => {
            //TODO: page失效
            shopInfo.push(res.rows)
            this.setState({
                shopInfo: shopInfo
            })
            console.log(this.state)

        })
    }
    searchInputChange = (e) => {
        this.setState({
            tag: e.target.value
        })
    }
    coverImgClick = (item) => {
        this.props.history.push({pathname: "/detail/" + item.sid, state: {sid: item.sid}})
    }
}

export default StoreSearch;
